<template>
    <section class="common-links">
        <div class="container" v-for="(tab, index) in tabs" :key="index">
            <div class="left-sidebar">
                <!-- Left sidebar navigation -->
                <ul>
                    <li><img :src="tab.icon" alt="" />{{ tab.label }}</li>
                </ul>
            </div>
            <div class="right-content">
                <div class="inner-box">
                    <div
                        class="inner-box-item"
                        v-for="item in tab.items"
                        :key="item.name"
                    >
                        <div class="cover">
                            <img :src="item.icon" alt="" />
                        </div>
                        <div class="content">
                            <div class="items">
                                <h4>{{ item.name }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
export default {
    name: "NavListsBox",
    data() {
        return {
            tabs: [
                {
                    name: "commonlyUsed",
                    label: "购物",
                    icon: require("@/assets/gwc.svg"),
                    items: [
                        {
                            name: "京东商城",
                            icon: require("@/assets/jingdong.svg"),
                        },
                        {
                            name: "苏宁电器",
                            icon: require("@/assets/suning.svg"),
                        },
                        { name: "国美", icon: require("@/assets/guomei.svg") },
                        {
                            name: "当当网",
                            icon: require("@/assets/dangdangwang.svg"),
                        },
                        { name: "淘宝", icon: require("@/assets/taobao.svg") },
                        { name: "天猫", icon: require("@/assets/tianmao.svg") },
                        {
                            name: "亚马逊",
                            icon: require("@/assets/yamaxun.svg"),
                        },
                        {
                            name: "聚划算",
                            icon: require("@/assets/juhuasuan.svg"),
                        },
                    ],
                },
                {
                    name: "life",
                    label: "视频",
                    icon: require("@/assets/luxiangji.svg"),
                    items: [
                        { name: "淘宝", icon: require("@/assets/taobao.svg") },
                        { name: "天猫", icon: require("@/assets/tianmao.svg") },
                        {
                            name: "亚马逊",
                            icon: require("@/assets/yamaxun.svg"),
                        },
                        {
                            name: "聚划算",
                            icon: require("@/assets/juhuasuan.svg"),
                        },
                        {
                            name: "京东商城",
                            icon: require("@/assets/jingdong.svg"),
                        },
                        {
                            name: "苏宁电器",
                            icon: require("@/assets/suning.svg"),
                        },
                        { name: "国美", icon: require("@/assets/guomei.svg") },
                        {
                            name: "当当网",
                            icon: require("@/assets/dangdangwang.svg"),
                        },
                    ],
                },
                {
                    name: "tool",
                    label: "直播",
                    icon: require("@/assets/zhibo.svg"),
                    items: [
                        {
                            name: "亚马逊",
                            icon: require("@/assets/yamaxun.svg"),
                        },
                        {
                            name: "聚划算",
                            icon: require("@/assets/juhuasuan.svg"),
                        },
                        { name: "淘宝", icon: require("@/assets/taobao.svg") },
                        { name: "天猫", icon: require("@/assets/tianmao.svg") },
                        { name: "国美", icon: require("@/assets/guomei.svg") },
                        {
                            name: "当当网",
                            icon: require("@/assets/dangdangwang.svg"),
                        },
                        {
                            name: "京东商城",
                            icon: require("@/assets/jingdong.svg"),
                        },
                        {
                            name: "苏宁电器",
                            icon: require("@/assets/suning.svg"),
                        },
                    ],
                },
                {
                    name: "commonlyUsed",
                    label: "新闻",
                    icon: require("@/assets/xinwen.svg"),
                    items: [
                        {
                            name: "京东商城",
                            icon: require("@/assets/jingdong.svg"),
                        },
                        {
                            name: "苏宁电器",
                            icon: require("@/assets/suning.svg"),
                        },
                        { name: "国美", icon: require("@/assets/guomei.svg") },
                        {
                            name: "当当网",
                            icon: require("@/assets/dangdangwang.svg"),
                        },
                        { name: "淘宝", icon: require("@/assets/taobao.svg") },
                        { name: "天猫", icon: require("@/assets/tianmao.svg") },
                        {
                            name: "亚马逊",
                            icon: require("@/assets/yamaxun.svg"),
                        },
                        {
                            name: "聚划算",
                            icon: require("@/assets/juhuasuan.svg"),
                        },
                    ],
                },
                {
                    name: "commonlyUsed",
                    label: "财经",
                    icon: require("@/assets/caijing.svg"),
                    items: [
                        {
                            name: "京东商城",
                            icon: require("@/assets/jingdong.svg"),
                        },
                        {
                            name: "苏宁电器",
                            icon: require("@/assets/suning.svg"),
                        },
                        { name: "国美", icon: require("@/assets/guomei.svg") },
                        {
                            name: "当当网",
                            icon: require("@/assets/dangdangwang.svg"),
                        },
                        { name: "淘宝", icon: require("@/assets/taobao.svg") },
                        { name: "天猫", icon: require("@/assets/tianmao.svg") },
                        {
                            name: "亚马逊",
                            icon: require("@/assets/yamaxun.svg"),
                        },
                        {
                            name: "聚划算",
                            icon: require("@/assets/juhuasuan.svg"),
                        },
                    ],
                },
                {
                    name: "commonlyUsed",
                    label: "社区",
                    icon: require("@/assets/shequ.svg"),
                    items: [
                        {
                            name: "京东商城",
                            icon: require("@/assets/jingdong.svg"),
                        },
                        {
                            name: "苏宁电器",
                            icon: require("@/assets/suning.svg"),
                        },
                        { name: "国美", icon: require("@/assets/guomei.svg") },
                        {
                            name: "当当网",
                            icon: require("@/assets/dangdangwang.svg"),
                        },
                        { name: "淘宝", icon: require("@/assets/taobao.svg") },
                        { name: "天猫", icon: require("@/assets/tianmao.svg") },
                        {
                            name: "亚马逊",
                            icon: require("@/assets/yamaxun.svg"),
                        },
                        {
                            name: "聚划算",
                            icon: require("@/assets/juhuasuan.svg"),
                        },
                    ],
                },
                {
                    name: "commonlyUsed",
                    label: "音乐",
                    icon: require("@/assets/yinyue.svg"),
                    items: [
                        {
                            name: "京东商城",
                            icon: require("@/assets/jingdong.svg"),
                        },
                        {
                            name: "苏宁电器",
                            icon: require("@/assets/suning.svg"),
                        },
                        { name: "国美", icon: require("@/assets/guomei.svg") },
                        {
                            name: "当当网",
                            icon: require("@/assets/dangdangwang.svg"),
                        },
                        { name: "淘宝", icon: require("@/assets/taobao.svg") },
                        { name: "天猫", icon: require("@/assets/tianmao.svg") },
                        {
                            name: "亚马逊",
                            icon: require("@/assets/yamaxun.svg"),
                        },
                        {
                            name: "聚划算",
                            icon: require("@/assets/juhuasuan.svg"),
                        },
                    ],
                },
            ],
        };
    },
};
</script>

<style scoped lang="scss">
.common-links {
    margin-top: 10px;
    background: #ccc;
}

.container {
    display: flex;
    position: relative;
    align-items: stretch;
    flex-direction: row;
    padding: 0;
    box-sizing: border-box;
    /* border: 1px solid #ddd; */
    /* border-radius: 5px; */
    overflow: hidden;
    background-color: #fff;
}

.left-sidebar {
    background-color: rgba(252, 252, 252, 0.3);
    border-color: rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    flex-shrink: 0;
    justify-content: center;
    padding: 0 10px;
    width: 80px;
    --icon-color: #ddd;
    border-right: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
}

.left-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.left-sidebar li {
    cursor: pointer;
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 400;
    height: 100%;
    justify-content: center;
    img {
        width: 26px;
        height: 26px;
        margin-bottom: 5px;
    }
}

.right-content {
    overflow: hidden;
    position: relative;
    height: 100%;
    flex: 1;
}

.inner-box {
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    min-height: 41px;
    overflow: hidden;
    transition: background-color 0.2s;
    padding: 12px 0 7px 20px;
    border-bottom: 1px solid var(--divider);
}

.inner-box-item {
    box-sizing: border-box;
    position: relative;
    height: 36px;
    margin-bottom: 5px;
    transition: width 0.2s ease-in-out;
    padding-right: 5px;
    width: 25%;
    cursor: pointer;
    /* border-radius: 4px; */
    display: flex;
    align-items: center;
}
.cover {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    position: relative;
    height: 22px;
    margin-left: 5px;
    width: 22px;
}
.inner-box-item:hover {
    background-color: hsla(0, 0%, 87%, 0.5);
}
.cover img {
    width: 18px;
    border: none;
    max-width: 100%;
}
.content {
    max-width: 100%;
    overflow: hidden;
}
.content {
    .items {
        display: flex;
        align-items: center;
        h4 {
            font-weight: 400;
            padding: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.9375rem;
            margin: 0 5px;
        }
    }
}
</style>
